<template>
  <div style=" width: 97%; margin: auto;">
    <el-row style="margin-top: 20px;">
      <el-col :span="16">
        <h3>材料目录</h3>
      </el-col>
      <el-col :span="8" style="text-align: right;">
        <el-button
          type="primary"
          style="width: 100px;margin-top: 13px;"
           size="default"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
           size="default"
          :data="listForm"
          @selection-change="handleSelectionChange"
          border>
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column type="index" label="序号" align="center" width="80" />
          <el-table-column prop="examineYear" label="年份" align="center">
          </el-table-column>
<!--          <el-table-column prop="catalogName" label="材料目录名" align="center">-->
<!--          </el-table-column>-->
          <el-table-column prop="name" label="附件名称" align="center">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="160">
            <template #default="scope">
              <el-button type="text"  size="default" @click="handleDownLoad(scope.$index)">下载</el-button>
              <el-button type="text"  size="default" @click="handleDeleteByIndex(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-dialog
      title="上传附件"
      v-model="dialogVisible"
      width="40%">
      <el-upload
        v-model="files"
        name="file"
        :action="uploadUrl"
        :on-success="handleSuccess"
        multiple
        :limit="10"
        :before-upload="handleBeforeUpload"
        :on-exceed="handleExceed"
        :headers="headers"
        :before-remove="handleBeforeRemove"
        :file-list="fileList">
        <el-row style="margin-bottom: 10px;">
          <el-col :span="24">
            <div style="width: 300px;display: flex;flex-direction: row;align-items: center;">
              <Upload style="width: 22px;color: darkgray;"></Upload>&nbsp;<el-button type="primary" size="default">上传文件</el-button>
            </div>
          </el-col>
          <el-col :span="24" style="margin-top: 10px;">
            <div slot="tip" class="el-upload__tip">单次上传文件不能超过10个，且不超过20M</div>
          </el-col>
        </el-row>
      </el-upload>
      <div slot="footer" style="width: 100%;text-align: right;margin-top: 20px;">
        <el-button @click="dialogVisible = false;">取 消</el-button>
        <el-button type="primary" @click="postInfo()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getTableInfoByPage, stSaveFile } from '@/views/yearCheck/ykb/st/st'
import db from '@/storage'
import { wrapperLoadViteEnv } from '~/build/utils'
import { Upload } from '@element-plus/icons-vue'

export default {
  components: { Upload },
  data() {
    return {
      files: [],
      fileList: [],
      fileName: [],
      //图片上传路径
      uploadUrl: undefined,
      headers: undefined,
      dialogVisible: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      listForm: [],
      postForm: []
    }
  },

  created() {

  },
  methods: {
    postInfo() {
      this.postForm = [];
      this.dialogVisible = false
      console.log(this.files)
      for (let i = 0; i < this.files.length; i++) {
        this.postForm.push({
          catalogName: '目录名称',//材料目录名称
          creditCode: localStorage.getItem('creditCode'),//统一社会信用代码
          examineYear: localStorage.getItem('examineYear'),//审查年度
          fileId: '',
          fileUrl: this.files[i].response.data,//附件路径
          name: this.files[i].name,//文件名称
          remark: '附件描述'//附件描述
        })
      }
      console.log(this.postForm)
      for (let i = 0; i < this.listForm.length; i++) {
        this.postForm.push({
          catalogName: this.listForm[i].catalogName,//材料目录名称
          creditCode: this.listForm[i].creditCode,//统一社会信用代码
          examineYear: this.listForm[i].examineYear,//审查年度
          fileId: this.listForm[i].fileId,
          fileUrl: this.listForm[i].fileUrl,//附件路径
          name: this.listForm[i].name,//文件名称
          remark: this.listForm[i].remark//附件描述
        })
      }
      stSaveFile(this.postForm).then(response => {
        this.$message({
          message: '上传文件成功！',
          type: 'success'
        })
        this.postForm = [];
        this.files = []
        this.fileList = []
        this.getInfo()
      })
    },
    /** 删除按钮操作 */
    handleDelete(ids) {
      console.log(ids)
    },
    handleDeleteByIndex(index) {
      console.log(index)
      this.listForm.splice(index, 1)
    },
    handleAdd() {
      this.files = []
      this.fileList = []
      const viteEnv = wrapperLoadViteEnv(import.meta.env)
      this.uploadUrl = viteEnv.VITE_BASE_URL_API + 'hbsys-system/minio/upload'
      this.dialogVisible = true
    },
    handleDownLoad(index) {
      console.log(this.listForm[index].fileUrl)
      fetch(this.listForm[index].fileUrl)
        .then(response => response.blob())
        .then(blob => {
          const a = document.createElement('a')
          const url = URL.createObjectURL(blob)
          a.href = url
          a.download = this.listForm[index].name
          a.click()
          URL.revokeObjectURL(url)
        })
        .catch(err => console.error(err))
    },
    getInfo() {
      this.headers = { Authorization: 'Bearer ' + db.get('token') }
      getTableInfoByPage(22).then(response => {
        this.listForm = JSON.parse(JSON.stringify(response.data).replace(/null/g, '""'))
      })
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.assetId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    handleSuccess(response, file, fileList) {
      this.fileList = fileList   // 更新已上传的图片列表
      this.files = fileList
    },
    handleBeforeRemove(file, fileList) {
      const index = this.fileList.indexOf(file) // 获取当前被移除的图片索引
      if (index !== -1) {
        this.fileList.splice(index, 1) // 从数据源中移除该图片
        this.files.splice(index, 1)
        this.fileName.splice(index, 1)
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning('只能上传10个文件')
    },
    handleBeforeUpload(file) {
      const MAX_SIZE = 20 * 1024 * 1024 // 设定最大文件大小为1MB
      if (file.size > MAX_SIZE) {
        this.$message.error('文件大小不能超过20MB!')
        return false // 返回false停止上传
      }
      if (file.size < 2) {
        this.$message.error('不能上传空文件!')
        return false // 返回false停止上传
      }
      return true
    }
  }
}
</script>
<style scoped lang="scss">
.el-table {
  --el-table-row-hover-bg-color: rgba(39, 137, 238, 0.1);
  --el-table-border-color:#e0e5f0;
}
:deep(.el-card.is-always-shadow) {
  box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6)
}

/* 拉框选中 */
.el-select-dropdown__item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

/* 鼠标经过下拉框 */
.el-select-dropdown__item:hover {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

.el-select-dropdown__item.selected {
  color: #2789EE;
}
.app-container {
  margin-top: 40px;
  margin-left: 15%;
  width: 70%;
}

.div-bg {
  width: 100%;
  background: #F0F0F0;
  height: 10px;
}

.box-card {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
}

.el-col {
  padding-left: 5px;
}

.divider-title {
  font-weight: bold;
  font-size: 18px;
}

.custom-select .el-select-dropdown {
  max-height: 600px; /* 设置为你想要的高度 */
  overflow: auto; /* 添加滚动条 */
}

table {
  border-collapse: collapse; /* 确保表格的边框合并为单一边框 */
  width: 100%; /* 表格宽度 */
}

td {
  border: 1px solid #ababab; /* 设置单线边框 */
  padding: 6px; /* 单元格内边距 */
}

.dialog-footer {
  width: 100%;
  text-align: right;
}
.el-form-item {
  margin-bottom: 0px;
}
</style>
